<template>
  <view>
    <view class="top-img">
      <image class="bg" :src="detailData.picImg"></image>
    </view>

    <view class="bottom-container">
      <view class="price-card-view">
        <view class="price-card">
          <view class="title">{{ detailData.proName }}</view>
          <view class="content">
            <view class="price-text">
              <cn-money
                :money="Number.parseFloat(detailData.referencePrice)"
                :size="48"
                v-if="false"></cn-money>
            </view>
            <view class="right-text">377人已购</view>
          </view>
        </view>
      </view>

      <view class="flow-view">
        <view class="title">服务流程</view>
        <view class="content">
          <view class="item">
            <view class="index">1</view>
            <view class="text">预约</view>
          </view>
          <view class="arrow-view">
            <image src="../../static/detail_step_arrow.png"></image>
          </view>
          <view class="item">
            <view class="index">2</view>
            <view class="text">评估</view>
          </view>
          <view class="arrow-view">
            <image src="../../static/detail_step_arrow.png"></image>
          </view>
          <view class="item">
            <view class="index">3</view>
            <view class="text">医护上门</view>
          </view>
        </view>
      </view>

      <view class="service-content-view">
        <view class="title">服务内容</view>
        <view class="content">
          <view class="text">
            <view v-html="detailData.serviceContent"></view>
          </view>
        </view>
      </view>
      <view class="service-content-view">
        <view class="title">适应人群</view>
        <view class="content">
          <view class="text">
            {{ detailData.userGroup }}
          </view>
        </view>
      </view>

      <view class="service-description-view">
        <view class="title">服务说明</view>
        <view class="content">
          <view class="text">
            <u-parse :content="detailData.proDes"></u-parse>
            <!-- <view v-html="detailData.proDes"></view> -->
          </view>
          <view class="table-view">
            <view class="table">
              <view class="table-row">
                <view class="table-title-cell">
                  <view class="title-cell">取消订单情况</view>
                </view>
                <view class="table-title-cell">
                  <view class="title-cell">退款扣费规则</view>
                </view>
              </view>
              <view class="table-row table-tb">
                <view class="table-cell">
                  <view class="td-cell">
                    医院接单后，医护未出发，用户可以免责取消预约服务
                  </view>
                </view>
                <view class="table-cell">
                  <view class="td-cell">全额退款，用户可自行取消订单</view>
                </view>
              </view>
              <view class="table-row table-tb">
                <view class="table-cell">
                  <view class="td-cell">
                    医护已出发且未开始服务，用户联系接单护士或客服确认取消订单
                  </view>
                </view>
                <view class="table-cell">
                  <view class="td-cell">
                    需扣除订单中的护士路费，保险费，扣除上门服务费20%，耗材费全部退还
                  </view>
                </view>
              </view>
              <view class="table-row table-tb">
                <view class="table-cell">
                  <view class="td-cell">
                    护士入户，服务开始后用户不可取消服务
                  </view>
                </view>
                <view class="table-cell">
                  <view class="td-cell">
                    订单支付金额不予退还，视情况确定是否退耗材费
                  </view>
                </view>
              </view>
              <view class="table-row table-tb">
                <view class="table-cell">
                  <view class="td-cell">因不可抗力因素导致不能上门服务</view>
                </view>
                <view class="table-cell">
                  <view class="td-cell">全额退款</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="tip-text">
          注：退款费用将在3-7个工作日内原路退回到支付账户中。
        </view>
      </view>
    </view>

    <view class="bottom-fixed-view">
      <view class="left">
        <image src="../../static/tab_custm.png" class="icon"></image>
        <view>客服</view>
      </view>
      <view class="right">
        <view class="btn1" @click="showAddToShoppingCartDialog" v-if="false">
          加入服务筐
        </view>
        <view class="btn2" @click="navToRiskNotification('book_now')">
          立即预约
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as userInfo from "../../common/api/userInfo.js";
import * as medicalProjects from "../../common/api/medicalProjects.js";
import * as serviceFrame from "../../common/api/serviceFrame.js";
import cnMoney from "../../components/cn-money/cn-money";
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth.js";
export default {
  data() {
    return {
      uid: "",
      type: "",
      hospitalUid: "",
      hospitalName: "",
      serviceItemImg: "",
      contactName: "",//就诊人
      detailData: {},
      user: {},
      token: getToken(),
      opts:""
    };
  },
  onLoad(opt) {
    const item = JSON.parse(decodeURIComponent(opt.item));
    this.opts=item
    console.log("接收的整个对象：",  this.opts);
    console.log("接收的整个对象：", item);
    this.uid = item.serviceItemUid;
    this.serviceItemImg = item.itemInfos[0].serviceItemImg;
    this.hospitalUid = item.hospitalUid;
    this.hospitalName = item.hospitalName;
    this.contactName = item.contactName;
    this.type = "医院";
    this.getData();
  },
  methods: {
    getData() {
      const param = {
        uid: this.uid,
      };
      medicalProjects
        .queryById(param)
        .then((result) => {
          console.log("opt", result);
          this.detailData = result.data.data;
          // this.setTitle();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    navToRiskNotification(addType) {
      console.log("token", this.token);
      if (!this.token) {
        uni.showToast({
          icon: "none",
          title: "请重新登录!",
          delay: 1500,
        });
        if (this.hospitalUid) {
          console.log("扫码登录");
          setTimeout(() => {
            uni.setStorageSync("nav_to_index_index", 1);
            uni.reLaunch({
              url:
                "/sickbed/pages/feixiang/login/login?hospitalName=" +
                this.hospitalName +
                "&type=" +
                this.type,
            });
          }, 2000);
        } else {
          console.log("正常");
          setTimeout(() => {
            uni.setStorageSync("nav_to_index_index", 1);
            uni.reLaunch({ url: "/pages/index/index" });
          }, 2000);
          return;
        }
      }
      const itemStr = encodeURIComponent(JSON.stringify(this.opts));
      console.log("itemStr", itemStr);
      uni.navigateTo({
        url:
          "/patientAppPages/pages/riskNotification/riskNotification?uid=" +
          this.uid +
          "&addType=" +
          addType +
          "&contactName=" +
          this.contactName +
          "&hospitalUid=" +
          this.hospitalUid +
          "&type=" +
          this.type,
      });
    },
    showAddToShoppingCartDialog() {
      uni.showModal({
        title: "确认加入服务框？",
        success: (res) => {
          if (res.confirm) {
            this.navToRiskNotification("add_cart");
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top-img {
  width: 100%;
  height: 520rpx;

  .bg {
    width: 100%;
    height: 520rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // background-image: url('../../static/home_banner.png');
  }
}

.bottom-container {
  padding: 0 20rpx;
  box-sizing: border-box;
  padding-bottom: 150rpx;

  .price-card-view {
    width: 100%;
    margin-top: -100rpx;

    .price-card {
      width: 100%;
      background: white;
      border-radius: 16rpx;
      padding: 34rpx;
      box-sizing: border-box;

      .title {
        font-size: 38rpx;
        color: #232323;
        font-weight: bold;
      }

      .content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 28rpx;

        .price-text {
          display: flex;
          color: #ee5a2c;

          .price-num {
            font-size: 40rpx;
          }
        }

        .right-text {
          font-size: 26rpx;
          color: rgba(35, 35, 35, 0.4);
        }
      }
    }
  }

  .flow-view {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 16rpx;
    margin-top: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;

    .title {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
    }

    .content {
      width: 100%;
      display: flex;
      margin-top: 24rpx;
      justify-content: space-between;
      padding: 0 40rpx;
      box-sizing: border-box;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .index {
          width: 84rpx;
          height: 84rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #0bc5ae;
          color: white;
          font-size: 40rpx;
          font-weight: bold;
          border-radius: 50%;
        }

        .text {
          margin-top: 18rpx;
          color: rgba(35, 35, 35, 0.7);
          font-size: 30rpx;
        }
      }

      .arrow-view {
        height: 84rpx;
        display: flex;
        align-items: center;

        image {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }

  .service-content-view {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 16rpx;
    margin-top: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;

    .title {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
    }

    .content {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-top: 24rpx;

      .text {
        font-size: 30rpx;
        color: rgba(35, 35, 35, 0.8);
      }

      .img {
        image {
          width: 100%;
          height: 336rpx;
          margin-top: 36rpx;
        }
      }
    }
  }

  .service-description-view {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 16rpx;
    margin-top: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;

    .title {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
    }

    .content {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-top: 24rpx;

      .text {
        font-size: 30rpx;
        color: rgba(35, 35, 35, 0.8);
      }

      .table-view {
        width: 100%;
        margin-top: 40rpx;

        .table {
          width: 100%;
          display: table;
        }

        .table-title-cell {
          display: table-cell;
        }

        .title-cell {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #0bc5ae;
          padding-top: 10rpx;
          padding-bottom: 10rpx;
          color: white;
        }

        .td-cell {
          width: 100%;
          padding-top: 10rpx;
          padding-bottom: 10rpx;
          font-size: 26rpx;
          color: #707776;
        }

        .table-tb {
          background: #e4f5f3;
        }

        .table-row {
          display: table-row;
          padding: 10rpx;
          box-sizing: border-box;
        }

        .table-cell {
          display: table-cell;
          padding: 0rpx 10rpx;
          box-sizing: border-box;
        }
      }
    }

    .tip-text {
      margin-top: 24rpx;
      font-size: 20rpx;
      color: #e82323;
      width: 100%;
      display: flex;
      justify-content: center;
      font-weight: 400;
    }
  }
}

.bottom-fixed-view {
  position: fixed;
  height: 120rpx;
  width: 100%;
  background: white;
  bottom: 0;
  border-top: solid 2rpx #f2f2f2;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
  justify-content: space-between;

  .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    color: rgba(35, 35, 35, 0.7);
    font-size: 20rpx;

    .icon {
      width: 44rpx;
      height: 44rpx;
    }
  }

  .right {
    display: flex;
    align-items: center;

    .btn1 {
      width: 226rpx;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: solid 2rpx #0bc5ae;
      border-radius: 44rpx;
      color: #0bc5ae;
      font-size: 30rpx;
    }

    .btn2 {
      width: 226rpx;
      height: 88rpx;
      background: #0bc5ae;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 44rpx;
      margin-left: 16rpx;
      color: white;
      font-size: 30rpx;
    }
  }
}
</style>
